<template>
	<view>
		<uni-nav-bar title="设备保养" left-icon="gear" background-color="rgb(61, 126, 255)" color="#fff"></uni-nav-bar>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<text class="content-text">
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-201设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn">待保养</button>
					</view>
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-101设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn">待保养</button>
					</view>
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-101设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn">待保养</button>
					</view>
				</text>
			</view>
			<view v-if="current === 1"><text class="content-text">
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-101设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn orange">保养中</button>
					</view>
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-101设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn orange">保养中</button>
					</view>
				</text></view>
			<view v-if="current === 2"><text class="content-text">
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-101设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn blue">已完成</button>
					</view>
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-101设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn blue">已完成</button>
					</view>
					<view class="box">
						<h3>芯片机器保养</h3>
						<p>地址：1车间-101设备</p>
						<p>预定时间：2024/3/30 13：00</p>
						<button type="warn" size="mini" class="btn blue">已完成</button>
					</view>
				</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['待保养', '保养中', '已完成'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				current: 0,
				activeColor: 'rgb(61, 126, 255)',
				styleType: 'button'
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
		}
	}
</script>

<style>
	.uni-padding-wrap {
		width: 750rpx;
		/* background-color: #fff; */
	}


	.content {
		width: 750rpx;
	}

	/* 卡片 */
	.box {
		width: 90%;
		margin: 35rpx auto;
		border-radius: 7px;
		background-color: #fff;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.2);
		padding: 20px;
		box-sizing: border-box;
		position: relative;
	}

	.box h3 {
		padding: 5rpx 0 10rpx;
	}

	.box p {
		padding: 5px 0;
	}

	.btn {
		position: absolute;
		top: 30rpx;
		right: 50rpx;
		border-radius: 15px;
	}

	.orange {
		background-color: rgb(255, 170, 0);
	}

	.blue {
		background-color: rgb(85, 170, 255);
	}
</style>